<template>
    <div class="user-setting">
        <basic-container>
            <el-tabs tab-position="left"
                     stretch
                     style="min-height: 400px;">
                <el-tab-pane label="安全设置">
                    <div class="user-setting__main">
                        <div class="user-setting__title">安全设置</div>
                        <div class="user-setting__item">
                            <div class="user-setting__meta">
                                <p class="title">
                                    <i class="el-icon-user"></i>
                                    账号安全
                                </p>
                                <p class="subtitle">更改当前账号密码</p>
                            </div>
                            <div class="user-setting__menu">
                                <el-button size="small" @click="changeAccountPwdWay">修改</el-button>
                            </div>
                        </div>
                        <!-- <div class="user-setting__item">
                            <div class="user-setting__meta">
                                <p class="title">
                                    <i class="el-icon-mobile-phone"></i>
                                    绑定手机
                                </p>
                                <p class="subtitle">设置您的绑定手机号码</p>
                            </div>
                            <div class="user-setting__menu">
                                <el-button size="small" @click="changePhone">修改</el-button>
                            </div>
                        </div>
                        <div v-if="sellerFlag" class="user-setting__item">
                            <div class="user-setting__meta">
                                <p class="title">
                                    <i class="el-icon-edit"></i>
                                    修改卖家店铺用户支付密码
                                </p>
                                <p class="subtitle">更改当前账号支付密码</p>
                            </div>
                            <div class="user-setting__menu">
                                <el-button size="small" @click="changePayPwd">修改</el-button>
                            </div>
                        </div>
                        <div v-if="sellerFlag" class="user-setting__item">
                            <div class="user-setting__meta">
                                <p class="title">
                                    <i class="el-icon-warning-outline"></i>
                                    忘记卖家店铺用户支付密码
                                </p>
                                <p class="subtitle">找回当前账户支付密码</p>
                            </div>
                            <div class="user-setting__menu">
                                <el-button size="small" @click="changePwdByPhoneFindBack">找回</el-button>
                            </div>
                        </div>
                        <div class="user-setting__item">
                            <div class="user-setting__meta">
                                <p class="title">
                                    <i class="el-icon-edit"></i>
                                    修改个人用户支付密码
                                </p>
                                <p class="subtitle">更改当前账号支付密码</p>
                            </div>
                            <div class="user-setting__menu">
                                <el-button size="small" @click="changeUserPayPwd">修改</el-button>
                            </div>
                        </div>
                        <div class="user-setting__item">
                            <div class="user-setting__meta">
                                <p class="title">
                                    <i class="el-icon-warning-outline"></i>
                                    忘记个人用户支付密码
                                </p>
                                <p class="subtitle">找回当前账户支付密码</p>
                            </div>
                            <div class="user-setting__menu">
                                <el-button size="small" @click="changeUserPwdByPhoneFindBack">找回</el-button>
                            </div>
                        </div> -->
                    </div>

                </el-tab-pane>
            </el-tabs>

            <!--选择修改方式的选择弹框-->
            <el-dialog
                    :title="changePwdWayInfo"
                    :visible.sync="dialogChangePayPwdWay"
					append-to-body
					:before-close="closeDia"
                    size="30%">
                <el-button size="mini" @click="changePwdByPhone">通过手机号修改</el-button>
                <el-button size="mini" @click="changePwdByOriginal">{{theOtherWayShowInfo}}</el-button>
            </el-dialog>

            <show-msg-code-by-phone ref="showMsgCodeByPhone" v-bind:whichWay="whichWay" v-bind:useType="useType"/>
            <show-change-pwd-by-original ref="showChangePwdByOriginal" v-bind:whichWay="whichWay" v-bind:useType="useType"/>
        </basic-container>
    </div>
</template>

<script>
    import showChangePwdByOriginal from "@/components/account/showChangePwdByOriginal";
    import showMsgCodeByPhone from "@/components/account/showMsgCodeByPhone";
    import ElSlPanel from "element-ui/packages/color-picker/src/components/sv-panel";
	var Dict = JSON.parse(localStorage.getItem("mall-dictionary")).content;
    import {
        isTestPwd
    } from '@/util/util'
    import {mapGetters} from "vuex";

import {  getStore} from '@/util/store'
    export default {
        components: {
            ElSlPanel,
            showChangePwdByOriginal,
            showMsgCodeByPhone
        },
        data() {
            return {
                sellerFlag:false,
                changePwdWayInfo:'请选择修改密码的方式',
                dialogChangePayPwdWay:false,                           //选择修改密码/支付密码等的方式的弹框是否显示
                theOtherWayShowInfo:'通过原密码修改',                  //除了手机号外的另一种修改方式
                whichWay:'changPwdByPhone1',                            //动态改变的值，用于给组件传值
                useType:'change_pwd1',
				isNeedModifyPassword:''
            }
        },
        watch: {
        },
        created() {
			this.isNeedModifyPassword=getStore({ name: 'isNeedModifyPassword' })
			if(this.isNeedModifyPassword){
				this.changeAccountPwdWay()
				alert('为了您的账户安全，请先设置账户的登录密码')
			}
            console.log(this.userInfo);
            let _sellerFlag = false;
            if(this.userInfo){
                if(this.userInfo.roleIds.length>0){
                   for(let i=0;i<this.userInfo.roleIds.length;i++){
                       let roleId =this.userInfo.roleIds[i];
                       if(roleId == 2){
                           _sellerFlag = true;
                           break
                       }
                       else {
                           continue;
                       }
                   }
                }
            }
            this.sellerFlag = _sellerFlag;
        },
        computed: {
            ...mapGetters(["permission", 'userInfo']),
            permissionList() {
                return {

                };
            },
        },
        methods: {
            //点击修改账号密码
            changeAccountPwdWay(){
                this.theOtherWayShowInfo = "通过原密码修改";
                this.dialogChangePayPwdWay = true;
                this.whichWay = "changPwdByPhone";
                for (let item of Dict.MSG_USE_ENUM) {
                    if (item.label == '修改密码') {
                        this.useType = item.value
                    }
                }
            },
			closeDia(){
				if(!this.isNeedModifyPassword){
					this.dialogChangePayPwdWay = false;
				}
			},
            //点击修改支付密码(修改卖家用户类型为店铺用户的支付密码)
            changePayPwd(){
                this.theOtherWayShowInfo = "通过原店铺支付密码修改";
                this.dialogChangePayPwdWay = true;
                this.whichWay = "changPayPwdByPhone";
                for (let item of Dict.MSG_USE_ENUM) {
                    if (item.label == '修改支付密码') {
                        this.useType = item.value
                    }
                }
            },
            //点击修改支付密码(修改卖家用户类型为个人用户用户的支付密码)
            changeUserPayPwd(){
                this.theOtherWayShowInfo = "通过原用户支付密码修改";
                this.dialogChangePayPwdWay = true;
                this.whichWay = "changUserPayPwdByPhone";
                for (let item of Dict.MSG_USE_ENUM) {
                    if (item.label == '修改卖家用户支付密码') {
                        this.useType = item.value
                    }
                }
            },
            //点击修改绑定的手机号
            changePhone(){
                for (let item of Dict.MSG_USE_ENUM) {
                    if (item.label == '修改绑定手机号') {
                        this.useType = item.value
                    }
                }
                this.whichWay = "changRelationPhone";
                this.$refs.showMsgCodeByPhone.open()
            },

            //通过手机号找回店铺类型为店铺用户的支付密码
            changePwdByPhoneFindBack(){
                this.whichWay = "forgetPwdAndChange";
                for (let item of Dict.MSG_USE_ENUM) {
                    if (item.label == '修改支付密码') {
                        this.useType = item.value
                    }
                }
                this.$refs.showMsgCodeByPhone.open()

            },

            //通过手机号找回店铺用户类型为用户的支付密码
            changeUserPwdByPhoneFindBack(){
                this.whichWay = "forgetPwdAndChange";
                for (let item of Dict.MSG_USE_ENUM) {
                    if (item.label == '修改卖家用户支付密码') {
                        this.useType = item.value
                    }
                }
                this.$refs.showMsgCodeByPhone.open()
            },

            //通过手机号修改
            changePwdByPhone(){
                this.$refs.showMsgCodeByPhone.open()
            },

            //通过除了手机号以外的另一种方式修改
            changePwdByOriginal(){
                if( this.useType == "change_pwd"){
                    //修改密码
                    this.whichWay = "changPwdByOriginal";
                }
                else if( this.useType =="change_pay_pwd"){
                    //修改卖家用户类型为店铺用户的支付密码
                    this.whichWay = "changPayPwdByOriginal";
                }
                else if(this.useType =="change_user_pay_pwd"){
                    //修改卖家用户类型为个人用户的支付密码
                    this.whichWay = "changPayPwdByOriginal";
                }
                this.$refs.showChangePwdByOriginal.open()
            },
        }
    }
</script>

<style lang="scss">
    .user-setting {
        &__main {
            padding: 8px 40px;
        }
        &__item {
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            padding: 12px 0;
            border-bottom: 1px solid #eee;
        }
        &__title {
            font-size: 20px;
            color: rgba(0, 0, 0, 0.85);
            line-height: 28px;
            font-weight: 500;
            margin-bottom: 12px;
        }
        &__meta {
            flex: 1;
            .title {
                margin: 6px 0;
                font-weight: 700;
                font-size: 14px;
            }
            .subtitle {
                margin: 8px 0;
                font-size: 14px;
                color: #555;
            }
        }
    }
</style>
